<div class="default-form-background">
    <button (click)="router.navProjectRolesDashboard()" mat-button
        style="padding-left: 8px; margin-bottom: 12px; margin-left: -8px;">
        <mat-icon>arrow_back_ios</mat-icon> <span style="font-size: 16px;">{{'BACK'|translate}}</span>
    </button>
    <div style="font-size: 24px; margin: 16px 0px;">{{fg.get('name').value}}</div>
    <div style="font-size: 16px; margin-bottom: 32px;"><span
            style="margin-right: 8px;">{{'ID'|translate}}</span><span>{{fg.get('id').value}}</span></div>
    <mat-tab-group mat-align-tabs="start" dynamicHeight>
        <mat-tab label="{{'BASIC_INFO'|translate}}" [formGroup]="fg">
            <div style="margin-top: 32px; width: 536px;">
                <mat-form-field>
                    <mat-label>{{'NAME'| translate}}<span class="mat-required">*</span></mat-label>
                    <input matInput formControlName="name">
                    <mat-error>{{nameErrorMsg | translate}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <mat-label>{{'DESCRIPTION'| translate}}</mat-label>
                    <textarea matInput formControlName="description"></textarea>
                </mat-form-field>
                <app-paginated-select [fg]="fg" [label]="'PARENT_ID'|translate" [key]="'parentId'"
                    [loadElements]="getParents()" style="flex: 1;" [options]="parentOptions">
                </app-paginated-select>
            </div>
            <div style="display: flex;justify-content: start; margin-top: 32px;">
                <button mat-raised-button style="width: 100px;" color="primary" class="app-btn"
                    (click)="update()">{{'UPDATE'|translate}}</button>
            </div>
        </mat-tab>
        <mat-tab label="{{'TAB_PERMISSIONS'|translate}}">
            <div style="display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px;">
                <div style="margin: 32px 0px 16px 0px; display: flex; align-items: center;">
                     <mat-icon [color]="'primary'" style="margin-right: 4px;">info
                    </mat-icon>
                    <div>{{"ROLE_PERMISSION_NOTE"|translate}}</div>
                </div>
                <div>
                    <button mat-raised-button style="width: 100px;" color="primary" class="app-btn"
                        (click)="addPermission()">{{'ADD_PERMISSION'|translate}}</button>
                </div>
            </div>
            <div class="table-container">
                <table mat-table [dataSource]="dataSource">
                    <ng-container matColumnDef="name">
                        <th mat-header-cell *matHeaderCellDef>
                            {{columnList['name']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            {{row.name}}
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="type">
                        <th mat-header-cell *matHeaderCellDef>
                            {{columnList['type']|translate}} </th>
                        <td mat-cell *matCellDef="let row">
                            {{row.type | translate}}
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="delete">
                        <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['delete']|translate}}</th>
                        <td mat-cell *matCellDef="let row" class="table-icon">
                            <mat-icon (click)="removePerm(row)" [color]="'warn'">delete_outline</mat-icon>
                        </td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
                </table>
            </div>
        </mat-tab>
    </mat-tab-group>
</div>